<template>
    <div class="small-big">
        <div class="size">
            {{ canvasSize }}%
        </div>
        <div @click="small" class="small">小</div>
        <div class="line">
            <vue-slider v-model="canvasSize" :lazy="true" :process="false" :min="20" :max="200"></vue-slider>
        </div>
        <div @click="big" class="big">大</div>
    </div>
</template>

<script>
    export default {
        name: "Zoom",
        data() {
            return {
                canvasSize: 100,
            }
        },
        methods: {
            big() {
                if (this.canvasSize + 20 > 200) {
                    this.canvasSize = 200;
                    return;
                }
                this.canvasSize = this.canvasSize + 20;
            },
            small() {
                if (this.canvasSize - 20 < 0) {
                    this.canvasSize = 1;
                    return;
                }
                this.canvasSize = this.canvasSize - 20;
            }
        },
        watch:{
            canvasSize: {
                handler(newVal, oldVal) {
                    this.$emit('input', newVal);
                },
                immediate: true,
                deep: true
            }
        }
    }
</script>

<style scoped lang="scss">
    .size, .big, .small, .line {
        float: left;
    }

    .size {
        width: 80px;
    }

    .small, .big {
        width: 50px;
        text-align: center;
        cursor: pointer;
    }

    .line {
        width: 140px;
    }
</style>
